<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group_3">
			<view class="fun-flex-col">
				<view class="fun-flex-col section" @click="isShowPicker = true">
					<text class="fun-self-start font text_3">Select A Withdraw Method</text>
					<view class="fun-mt-12 fun-flex-row fun-items-center fun-justify-between">
						<text class="font_2 text_4 text_5">{{drawMethod}}</text>
						<image class="fun-shrink-0 image_5"
							src="../../../static/235ec6d72e8cce70ffd36bb80fafbff3.png" />
					</view>
				</view>
				<view class="fun-mt-16 fun-flex-col section_2">
					<text class="fun-self-start font text_6">Enter Withdrawl Amount</text>
					<view class="fun-mt-20 fun-flex-row fun-items-baseline fun-self-stretch group_4">
						<text class="text_7">$</text>
						<input class="text_8 ml-9" placeholder="The amount that can be withdrawn is $26,342.90" />
					</view>
					<view class="fun-mt-20 fun-self-stretch divider"></view>
				</view>
			</view>
			<view class="fun-flex-col group_5">
				<view class="text_4 view">
					<text class="font_2">The transaction fee rate is</text>
					<text class="font_2 text_9">0.1%</text>
					<text class="font_2">and this transaction will charge a fee o</text>
					<text class="font_2 text_10">f $26.34</text>
					<text class="font_2">. Operable from 9:00-16:00. on trading days.</text>
				</view>
				<view class="fun-mt-12 fun-flex-col fun-justify-start fun-items-center text-wrapper">
					<text class="text_11" @click="confirm">Confirm</text>
				</view>
			</view>
		</view>
		<view class="fun-flex-col section_3">
			<view class="fun-flex-row fun-justify-between fun-items-center group_6">
				<text class="font text_12">Withdraw Cash Flow Statement</text>
				<image class="image_6" src="../../../static/06c0f75afd00995c1e97e9d60446cea5.png" />
			</view>
			<view class="fun-mt-20 fun-flex-col">
				<view class="fun-flex-col fun-justify-between">
					<view class="fun-flex-row fun-justify-between fun-items-start equal-division-item">
						<text class="font text_13">Time</text>
						<text class="font text_13">Amount</text>
						<text class="font text_13">Results</text>
					</view>

					<view class="fun-flex-row fun-items-start fun-justify-between equal-division-item view_3"
						@click="toDetail('In Process')">
						<text class="font_3 text_14">7.1.14:35:09</text>
						<text class="font_3 text_14 text_15">-10,000.00</text>
						<text class="font_3 text_14 text_16">In Process</text>
					</view>
				</view>

				<view class="fun-flex-row fun-justify-between fun-items-center group_6 view_3"
					@click="toDetail('Successful')">
					<text class="font_3 text_17">6.30.14:35:09</text>
					<text class="font_4">-1,000,000.00</text>
					<text class="font_3 text_18">Successful</text>
				</view>
				<view class="fun-flex-row fun-items-center group_6 view_3" @click="toDetail('Failed')">
					<text class="font_3 text_19">6.30.14:34:09</text>
					<text class="font_4 text_20">-1,000,000.00</text>
					<text class="font_3 text_21">Failed</text>
				</view>
				<view class="fun-flex-row fun-items-center group_6 view_4" @click="toDetail('Failed')">
					<text class="font_3 text_22">6.30.14:34:09</text>
					<text class="font_4 text_23">-1,000,000.00</text>
					<text class="font_3 text_24">Failed</text>
				</view>
				<view class="fun-flex-row fun-items-center group_6 view_5" @click="toDetail('Failed')">
					<text class="font_3 text_25">6.30.14:34:09</text>
					<text class="font_4 text_26">-1,000,000.00</text>
					<text class="font_3 text_27">Failed</text>
				</view>
				<view class="fun-flex-row fun-items-center group_6 view_6" @click="toDetail('Failed')">
					<text class="font_3 text_28">6.30.14:34:09</text>
					<text class="font_4 text_29">-1,000,000.00</text>
					<text class="font_3 text_30">Failed</text>
				</view>
				<view class="fun-flex-row fun-items-center group_6 view_7" @click="toDetail('Failed')">
					<text class="font_3 text_31">6.30.14:34:09</text>
					<text class="font_4 text_32">-1,000,000.00</text>
					<text class="font_3 text_33">Failed</text>
				</view>
			</view>
		</view>
		<u-picker :show="isShowPicker" @confirm="confirmPicker" @close="isShowPicker = false" @cancel="isShowPicker = false"
		 cancelText="Cancel" confirmText='Confirm' :columns="columns" :closeOnClickOverlay="true" confirmColor='#5ceec4'>
		 </u-picker>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				drawMethod:"Withdrawal to your Cryptocurrency Wallet or bank card",
				isShowPicker:false,
				columns: [['Bank card', 'Crypto Wallet']],
			};
		},

		methods: {
			toDetail(value) {
				uni.navigateTo({
					url: `/pages/mine/myWallet/withdrawDetail?status=${value}&type=withdraw`
				})
			},
			confirm() {
				uni.navigateTo({
					url: `/pages/mine/myWallet/submitSuccess`
				})
			},
			confirmPicker(e){
				this.drawMethod = e.value[0];
				this.isShowPicker = false
			},
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.mt-23 {
		margin-top: 46rpx;
	}

	.page {
		padding: 32rpx;
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			padding-left: 36rpx;

			.text {
				color: #ffffff;
				font-size: 30rpx;
				font-family: SF Pro Text;
				font-weight: 600;
				line-height: 22.18rpx;
			}

			.image {
				width: 34rpx;
				height: 22rpx;
			}

			.image_2 {
				width: 30rpx;
				height: 22rpx;
			}

			.image_3 {
				width: 48rpx;
				height: 22.66rpx;
			}
		}

		.group_2 {
			margin-top: 48rpx;
			padding: 16rpx 0 4rpx;

			.image_4 {
				width: 48rpx;
				height: 48rpx;
			}

			.pos {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
			}

			.text_2 {
				color: #ffffff;
				font-size: 32rpx;
				font-family: SF Pro Display;
				font-weight: 300;
				line-height: 28.56rpx;
			}
		}

		.group_3 {
			.section {
				padding: 32rpx;
				background-color: #1b1d53;
				border-radius: 24rpx;

				.image_5 {
					width: 32rpx;
					height: 32rpx;
				}
			}

			.section_2 {
				padding: 32rpx 8rpx 32rpx 24rpx;
				background-color: #1b1d53;
				border-radius: 24rpx;

				.text_6 {
					margin-left: 8rpx;
				}

				.group_4 {
					.text_7 {
						color: #5ceec4;
						font-size: 72rpx;
						font-family: SF Pro Display;
						font-weight: 700;
					}

					.text_8 {
						color: #ffffff;
						font-size: 24rpx;
						font-family: SF Pro Display;
						width: 100%;
					}
				}

				.divider {
					margin-right: 16rpx;
					background-color: #b0b1bf24;
					height: 2rpx;
				}
			}

			.text_4 {
				opacity: 0.5;

				.text_9 {
					font-weight: 600;
				}

				.text_10 {
					font-weight: unset;
					word-break: break-all;
				}
			}

			.group_5 {
				padding-top: 28rpx;

				.text-wrapper {
					padding: 32rpx 0;
					background-color: #5ceec4;
					border-radius: 44rpx;

					.text_11 {
						color: #000000;
						font-size: 32rpx;
						font-family: SF Pro Display;
						font-weight: 700;
					}
				}
			}

			.font_2 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #ffffff;
			}
		}

		.section_3 {
			margin-top: 76rpx;
			padding: 30rpx 0 48rpx;
			background-color: #1b1d53;
			border-radius: 24rpx;

			.group_6 {
				padding: 0 32rpx;

				.image_6 {
					width: 40rpx;
					height: 40rpx;
				}

				.font_4 {
					font-size: 24rpx;
					font-family: SF Pro Display;
					color: #f5798f;
				}

				.text_18 {
					color: #5ceec4;
				}

				.text_20 {
					margin-left: 100rpx;
				}

				.text_21 {
					margin-left: 152rpx;
				}

				.text_23 {
					margin-left: 100rpx;
				}

				.text_24 {
					margin-left: 152rpx;
				}

				.text_26 {
					margin-left: 100rpx;
				}

				.text_27 {
					margin-left: 152rpx;
				}

				.text_29 {
					margin-left: 100rpx;
				}

				.text_30 {
					margin-left: 152rpx;
				}

				.text_32 {
					margin-left: 100rpx;
				}

				.text_33 {
					margin-left: 152rpx;
				}
			}

			.equal-division-item {
				padding: 0 16rpx;

				.text_13 {
					margin-left: 16rpx;
				}

				.text_14 {
					margin-left: 16rpx;
				}

				.text_15 {
					color: #f5798f;
				}

				.text_16 {
					color: #80c1e6;
				}
			}

			.view_2 {
				margin-top: 28rpx;
			}

			.font_3 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				color: #b0b0bf;
			}

			.view_3 {
				margin-top: 32rpx;
			}

			.view_4 {
				margin-top: 32rpx;
			}

			.view_5 {
				margin-top: 32rpx;
			}

			.view_6 {
				margin-top: 32rpx;
			}

			.view_7 {
				margin-top: 32rpx;
			}
		}

		.font {
			font-size: 28rpx;
			font-family: SF Pro Display;
			font-weight: 700;
			color: #ffffff;
		}
	}

	input::placeholder {
		font-size: 10px;
		/* 设置placeholder的字体大小为16px */
	}
</style>